<template>
    <div class='card-leader' v-bind:style="{width:width}">
        <div class='card-inner'>
            <div class='personTotal clearfix' :class="{'backLeader' : type!=='leader'}">
                <div class='lf personInfo'>
                    <h3 class='name ellipsis' :title="personInfo.name">{{personInfo.name}}</h3>
                    <p class="job" :title="personInfo.c_current_job">{{personInfo.c_current_job}}</p>
                    <ul class="width-nochange">
                        <li class="ellipsis" :title="personInfo.birthdate"><i class="fa fa-birthday-cake" aria-hidden="true"></i>出生日期 : {{personInfo.birthdate && personInfo.birthdate.split(' ')[0]}}({{personInfo.birthdate | calculateAge}}岁)</li> 
                        <li class="ellipsis" :title="personInfo.c_leader_ident"><i class="iconfont" ></i>国&nbsp&nbsp籍 : {{personInfo.c_leader_ident}}</li>
                        <li class="ellipsis" :title="personInfo.political_sta_chn"><i class="iconfont" ></i>政治面貌 : {{personInfo.political_sta_chn}}</li>
                        <li class="backwork" v-if="type!=='leader'" :title="personInfo.c_retire_end_dt && personInfo.c_retire_end_dt.split(' ')[0]"><i class="fa fa-calendar" ></i>返聘时间 :{{personInfo.c_retire_bgn_dt && personInfo.c_retire_bgn_dt.split(' ')[0]}} 至 {{personInfo.c_retire_end_dt &&  personInfo.c_retire_end_dt.split(' ')[0]}}</li>
                    </ul>
                </div>
                <div class='lf personImg'>
                    <img :src="srcImg" class='cardPhoto' alt="">
                </div>
            </div>
            <div class="btnArea">          
                <a class="btn btn-leaderInfo" v-if="hideLeader1" target="_blank" @click="goResumeUrl">
                    <i class="fa fa-file-pdf-o"></i> 干部任免审批表
                </a>
                <a class="btn btn-leaderSalary" @click="salaryDetail" v-if="hidePay1" data-replace-inner="#modal1" data-spin="true" data-modal="#modal1">
                    <i class="fa fa-jpy"></i> 薪酬信息
                </a>                            
            </div>

        </div>
        <el-dialog
            :title="title"
            size="small"
            :visible.sync="dialogTableVisible"
            :lock-scroll='lockGao'>
                <div class="box-body">
                    <table class="table table-bordered">  
                        <tbody>
                            <tr>
                                <td rowspan="2">年度</td>
                                <td rowspan="2">姓名</td>
                                <td rowspan="2">薪级</td>
                                <td rowspan="2">在岗天数</td>
                                <td rowspan="2">岗位工资/月</td>
                                <td rowspan="2">岗位工资/年</td>
                                <td rowspan="2">辅助工资</td>
                                <td colspan="2">效绩奖金</td>
                                <td colspan="2">年收入</td>
                                <td rowspan="2">货币单位</td>     
                            </tr>
                            <tr>
                                <td>年度奖金</td>
                                <td>延递奖金</td>
                                <td>当期收入</td>
                                <td>权责合计</td>
                            </tr>
                            <template v-if="gridData.length>0">
                                <tr class="bbq"  v-for="data in gridData">
                                    <td v-for="item in items">{{data[item]}}</td>
                                </tr>
                            </template>

                            <tr class="bbq" v-else>
                                <td colspan="13">暂无数据</td>
                            </tr>
                            </tbody>
                    </table>
                    <div>
                        <span style="margin-top:10px;display:block" >注&nbsp:&nbsp目标值根据个人岗位关系树核算,&nbsp不含KPI考核,&nbsp二次分配等元素的影响</span>
                    </div>
                </div>
                <!-- <div class="salaryRecord">
                    <h3>近半年发薪记录</h3>
                    <el-table :data="gridData1" fit='true'>
                        <el-table-column property="date" label="发薪期间" width="80"></el-table-column>
                        <el-table-column property="name" label="发薪类型" width="80"></el-table-column>
                        <el-table-column property="address" label="收入合计	" width="80"></el-table-column>
                        <el-table-column property="address" label="扣减合计" width="80"></el-table-column>
                        <el-table-column property="address" label="实发工资"></el-table-column>
                        <el-table-column property="address" label="公司承担社保/MPF"></el-table-column>
                        <el-table-column property="address" label="人工成本合计"></el-table-column>
                        <el-table-column property="address" label="货币代码"></el-table-column> 
                    </el-table>
                </div> -->

        </el-dialog>
    </div>
</template>
<script>
    import Vue from 'vue'
    import {Table,TableColumn,Dialog} from 'element-ui'
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Dialog)
    export default {
        data(){
            return{
                // wid:'33.333%'
                red:'me',
                dialogTableVisible:false,
                gridData:[],
                items: [
                    'year',//年
                    'name',//名字
                    'salarylevel',//薪级
                    'ondays',//在岗天数
                    'monthlypostsalary',//月
                    'annualpostsalary',//年
                    'supplementarysalary',//辅助工资
                    'annualbonus',//年度奖金
                    'deferredbonus',//延递奖金
                    'currentrevenue',//当期收入
                    'accrualtotal',//权责合计
                    'monetaryunit'//货币单位
                ],
                gridData1:[],
               	lockGao:false,
          
            }
        },
        components:{

        },
        created:function(){
//      	this.Axios.Post(this.URL.getEmployeeImg.url,{
//                  emplid:this.personInfo.emplid
//             }).then(res=>{
//              	this.srcImg = 'data:image/png;base64,'+ res.data.message;
//              })
        },
        methods:{
            salaryDetail:function(e){
                let self = this;
                let para = {
                    emplId:this.personInfo.emplid
                };
                this.Axios.Post(this.URL.queryExSalary.url,para)
                         .then(function(res){
                             self.gridData = res.data.datas.exSalarys;
                             for(var i=0;i<self.gridData.length;i++){
                                 console.log(123,self.gridData);
                                //  self.gridData[i].name += self.gridData[i].payroll_type;
                                 self.gridData[i].name += ('('+self.gridData[i].payroll_type+')')
                             }
                             console.log(self.gridData,"self.gridData");
                             })
                this.dialogTableVisible = true;
                return false
            },
            goResumeUrl() {
            	  localStorage.setItem('em_leader',this.personInfo.emplid)
            	  localStorage.setItem('lead_sex',(this.personInfo.sex_descr === '女' ? 2 : 1))
			      window.open("/module/leaderAppoint.html");
		    },
        },
        computed:{
            srcImg : function(){
            	
            	return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + this.personInfo.emplid + '&sex=' +(this.personInfo.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
             	            
            },
			ComputedEmplid : function(){
                return 'module/leaderAppoint.html?emplid=' + this.personInfo.emplid 
			},
            hideLeader1:function(){
                console.log(this.hideLeader,'hideLeader');
                 return  this.hideLeader ? true : false; 
            },
            hidePay1:function(){
                return  this.hidePay ? true : false;
            },
            title:function(){
                    return this.personInfo.name + "-薪酬信息";
            }
		},
        filters:{
            calculateAge:function(value){
                var year = value.split(".")[0];
                return new Date().getFullYear() - year;
            },
            handleDate:function(value){

                return value.split(' ')[0];
            }
        },
        props:{
            width:{
                type:String,
                default:'33.333%'
            },
            personInfo:{
                type:Object,
                default:''
            },
            hideLeader:{
                type:Number,
                default:0
            },
            hidePay:{
                type:Number,
                default:0              
            },
            type:{
                type:String,
                default:"leader"
            }
        },
        watch:{
            widt:function(){
                console.log('watch',this.widt);
                console.log(this.red,'tell me color');
            }
        }
    }
</script>
<style scoped>
    .card-leader{
        min-height: 1px;
        float: left;
        color: #333;
        background-color: #fff;
        padding-right: 10px;
        padding-left: 10px;
    }
    .card-inner{
        width:100%;
        position: relative;
        margin: 10px auto;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    }
    .backwork{
        /*line-height:50px;*/
        height:50px;
     	overflow: hidden;
        /*white-space: nowrap;*/
    }

/*个人信息区域样式 start*/
    .card-leader .personTotal{
        cursor: pointer;
        margin-bottom: 20px;
		height:186px;
    }
    .card-leader div.backLeader{
		height:240px;
    }    
    .card-leader .personInfo{
        float: left;
        width:69%;
        padding-left:4%;
    }
    .card-leader .personInfo .job{
        margin-bottom:5px;
        max-height:60px;
        line-height:20px;
	    overflow: hidden;
	    text-overflow:ellipsis;
    }

    .iconfont{
        width:20px;
        display: inline-block;
    }
    .card-leader .name{
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 10px;
        font-weight: 500;
        line-height: 1.1;
    }
    .card-leader .width-nochange{
        /*max-width: 237px;*/
        min-width: 223px;
    }
    
    .card-leader li{
        line-height: 25px;
        color: #333;
    }
    .card-leader li .fa{
        width:20px;
    }
    .card-leader .personImg{
        float: left;
        width:31%;
        padding-left:5px;
        padding-top: 35px;
    }
    .card-leader .cardPhoto{
        /*margin-left:5px;*/
        width: 100px;
        height: 139px;
        border-radius: 50%;
        max-width: 100%;
        vertical-align: middle;
    }
/*个人信息区域样式 end*/

/*按钮区域样式 start*/
    .card-leader .btnArea{
        background: #F2F5F7;
        padding: 12px 0;
        border-top: 1px solid #E6E9ED;
        text-align: center;
        height:44px;
    }
    .card-leader .btn {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
    }
    .card-leader .btnArea .btn-leaderInfo{
        color: #fff; 
        background-color: #3c8dbc;
        border-color: #204d74;
    }
    .card-leader .btnArea .btn-leaderInfo:hover{
        background-color: #367fa9;
        cursor: pointer;
    }
    .card-leader .btnArea .btn-leaderSalary{
        color: #fff; 
        margin-left:8px;
        background-color: #00c0ef;
        border-color: #00acd6;
    }
    .card-leader .btnArea .btn-leaderSalary:hover{
        background-color: #00acd6;
        cursor: pointer;
    }
/*按钮区域样式 end*/
</style>
<style>
   .card-leader .el-dialog--small {
        width: 64%;
    }
    .card-leader .el-table .gutter {
        display: none;
    }
    .card-leader .salaryRecord{
        margin-top:20px;
    }
    /*.card-leader .el-dialog--small {
        width: 64%;
        
    }*/
    .card-leader .el-dialog {
        position:relative;
        left:0;
        margin:auto;
        transform:translateX(0);
        -ms-transform:translateX(0);
    }
    .card-leader .el-dialog__header{
        width:98%;
    }
    .card-leader .el-dialog__body{
        padding-left:20px;
        padding-right:25px;
    }
    .card-leader .el-dialog__body .box-body{
        padding-left:5px;
    }
    /*高管薪资*/
    .card-leader .box-body {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
      padding: 10px;
      background-color:#fff;
  }
  /* table {
      border-spacing: 0;
      border-collapse: collapse;
  } */
  .card-leader .table-bordered {
      border: 1px solid #EBEBEB;
      width:100%;
  }
  /*td*/
  .card-leader .table > tbody > tr > td{
      border-top: 1px solid #e7eaec;
      line-height: 1.42857;
      padding: 8px;
      background-color:#fff;
  }
  .card-leader .bbq td {
       background-color:#fff !important;
  }
  .card-leader tbody > tr > td{
      border:1px solid #e7e7e7;
  }
  .card-leader .table td{
      box-sizing: border-box;
  }
  .card-leader .table > tbody > tr > td{
      border-top: 1px solid #e7eaec;
      line-height: 1.42857;
      padding: 8px;
      text-align: center;
      vertical-align: middle;
      background:#F5F5F6;
  }
</style>



